<template>
    <div class="bill_details">
        <div class="header">
            <i @click='goBack' class="iconfont icon-xia"></i>
            <div class="bill_month">8月份</div>
            <div class="bill_room">御景湾11栋503室</div>
        </div>
        <div class="content">
            <div class="main">
                <div class="item">
                    租金 <span class="cur">1500.00元</span>
                </div>
                <div class="item" style="height: auto;" @click="zk('zk1','his1')">
                    水费 <span class="cur">48.00元</span><i ref="zk1"  class="iconfont icon-right"></i>
                    <div class="history" ref="his1" style="height: 0px;" >
                        <span class="last_m">上月读表:156方</span>
                        <span class="cur_m">本月读表:133方</span>
                    </div>
                </div>
                <div class="item">
                    电费 <span class="cur">48.00元</span><i ref="zk2" @click="zk('zk2','his2')" class="iconfont icon-right"></i>
                    <div class="history" ref="his2" style="height: 0px;" >
                        <span class="last_m">上月读表:156方</span>
                        <span class="cur_m">本月读表:133方</span>
                    </div>
                </div>
                <div class="bt"><button class="to_pay">去缴费</button></div>
            </div>
        </div>
        <div class="footer">
            <div class="nav">
                <div ref="nav_item1" style="color:#ffb001;" class="nav_item" @click="go_nav('bill_details', 'nav_item1')">
                    <i class="iconfont icon-jiaofei"></i>
                    <li>缴费</li>
                </div>
                <div ref="nav_item2" class="nav_item"  @click="go_nav('list', 'nav_item2')">
                    <i class="iconfont icon-fangyuan"></i>
                    <li>房源</li>
                </div>
                <div ref="nav_item3" class="nav_item" style="margin-right: 0;" @click="go_nav('usercenter', 'nav_item3')">
                    <i class="iconfont icon-wodedangxuan" ></i>
                    <li>我的</li>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
  name: 'bill_details',
  data() {
    return {

    };
  },
  methods: {
    /* 返回上一页 */
    goBack() {
      window.history.length > 1
        ? this.$router.go(-1)
        : this.$router.push('/');
    },
    /* 展开账单 */
    zk(_ref, his) {
      this.$refs[_ref].className = this.$refs[_ref].className === 'iconfont icon-right' ? 'iconfont icon-down-trangle' : 'iconfont icon-right';
      this.$refs[his].style.height = this.$refs[his].style.height === '43px' ? '0px' : '43px';
    },
    go_nav(nav, index) {
      this.$router.push({ name: nav });
      const lists = document.querySelectorAll('.nav_item');
      for (const v of lists) {
        v.style.color = '#8e8e8e';
      }
    },
  },
};
</script>

<style lang="scss">
    @import "@/css/public.scss";
    @mixin br{
        border:1px solid red;
    }
    li{
        list-style: none;
    }
    a{ text-decoration: none;}
    body{
        .bill_details{
            height: 100%;
            display: flex;
            flex-direction: column;
            .header{
                position: relative;
                background:-webkit-linear-gradient(25deg, #ffb001, #f6b21c 68%, #ff9b04);
                color:#ffffff;
                height: 97px;
                margin-bottom: vw(21);
                .bill_month{
                    font-size: vw(20);
                    height: vw(55);
                    text-align: center;
                    line-height: vw(55);
                }
                .bill_room{
                    padding-left: vw(21);
                    height: vw(42);
                    font-size: vw(23);
                    line-height: vw(42);
                }
                i{
                    position: absolute;
                    color:#ffffff;
                    font-size: vw(20);
                    display: inline-block;
                    line-height: vw(20);
                    height: vw(20);
                    width: vw(20);
                    top: vw(24);
                    left: vw(20);
                    margin-top: vw(-10);

                }
            }
            .content{
                background-color: #f8f8f8;
                flex-grow: 1;
                height: 0;
                .main{
                    position: relative;
                    width: vw(358);
                    margin: 0 auto;
                    height: vw(430);
                    box-shadow: 0px 1px 9px 4px #e2dada;
                    padding: vw(22) vw(19);
                    .bt{
                        bottom: vw(27);
                        height: vw(42);
                        position: absolute;
                        .to_pay{
                            position: absolute;
                            background:$public-color;
                            width: vw(300);
                            height: vw(42);
                            font-size: vw(18);
                            line-height: vw(42);
                            left: vw(160);
                            color:#ffffff;
                            top: 0;
                            border:0;
                            outline: none;
                            margin-left: vw(-150);
                            border-radius: vw(21);
                        }
                    }
                    .Titl{
                        border-bottom: 1px solid #b8b8b8;
                        .titl{
                            font-size: vw(19);
                            color:#323232;
                            text-align: left;
                        }
                        .prize{
                            height: vw(39);
                            font-size: vw(13);
                            color:#b8b8b8;
                            text-align: left;
                            line-height: vw(39);
                        }

                    }
                    .item{
                        transition: height 2s;
                        line-height: vw(42);
                        position: relative;
                        text-align: left;
                        padding: 0 vw(14);
                        border-bottom: 1px solid #b8b8b8;
                        font-size: vw(15);
                        color: #020202;
                        i{
                            width: vw(13);
                            height: vw(13);
                            line-height: vw(13);
                            font-size: vw(13);
                            color:#b8b8b8;
                            position: absolute;
                            top: vw(14);
                            right: 0;
                        }
                        .cur{
                            position: absolute;
                            line-height: vw(42);
                            font-size: vw(15);
                            color: #020202;
                            top: 0;
                            right: vw(14);
                        }
                        .history{
                            overflow: hidden;
                            transition: height 1s;
                            height: vw(0);
                            line-height: vw(39);
                            text-align: left;
                            .cur_m{
                                display: inline-block;
                                margin-left: vw(37);
                            }
                        }
                    }
                    .item:after{
                        content: '';
                        background-color: #4971f8;
                        position: absolute;
                        width: vw(3);
                        height: vw(14);
                        left: 0;
                        top: vw(14);
                    }
                }
            }
            .footer{
                height: 54px;
                padding: vw(12) vw(43) 0 vw(43);
                .nav{
                    .nav_item{
                        color:#8e8e8e;
                        float: left;
                        width: vw(50);
                        margin-right: vw(65);
                        text-align: center;
                        i{
                            font-size: vw(21);
                            line-height: vw(21);
                            text-align: center;
                        }
                        li{
                            margin-top: vw(5);
                            text-align: center;
                            font-size: vw(8);
                            line-height: vw(8);
                        }
                    }
                }
            }
        }
    }
</style>
